<template>
	<div class="flex flex-col">
		<div class="text-sm">【关键词条】</div>
		<div ref="echartsContainerRef" class="flex-1"></div>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import useSetOption from '@/hooks/useSetOption';
	import { useVisualizationStore } from '@/stores/visualizationStore';
	import 'echarts-wordcloud';

	const echartsContainerRef = ref(null);
	const visualizationStore = useVisualizationStore();

	useSetOption({
		// Echart容器
		refTarget: echartsContainerRef,
		// Echarts渲染配置项
		renderOptions: () => {
			const wordsDatas = visualizationStore.data.wordCloudData.datas;

			return {
				series: [
					{
						// 关键词云
						type: 'wordCloud',
						// 绘制的形状
						shape: 'circle',
						// 宽
						width: '95%',
						height: '95%',
						// 旋转的范围: 全部都不旋转
						rotationRange: [0, 0],
						// 如果为true, 则允许文字部分在画布外绘制
						drawOutOfBound: false,
						/**
						 * 如果字体太大而无法显示文本, 是否收缩文本?
						 *  - false: 文本将不渲染。
						 *  - true: 文本将被缩小
						 */
						shrinkToFit: true,
						//全局文本样式
						textStyle: {
							// Color可以是一个回调函数或一个颜色字符串
							color: function () {
								// Random color
								return (
									'rgb(' +
									[
										Math.round(Math.random() * 160),
										Math.round(Math.random() * 160),
										Math.round(Math.random() * 160),
									].join(',') +
									')'
								);
							},
						},
						// 配置该项后, 鼠标悬浮到关键词上时, 可重点突出该词
						emphasis: {
							focus: 'self',
							textStyle: {
								textShadowBlur: 10,
								textShadowColor: '#333',
							},
						},
						// 数据
						data: wordsDatas,
					},
				],
			};
		},
	});
</script>

<style scoped></style>
